<template>
  <el-dialog :visible.sync="showPointDialog" :before-close="check" title="资费策略" width="67%">
    <el-card class="box-card">
      <div slot="header">
        <span class="bold">基本信息</span>
      </div>

      <el-row>
        <el-col :span="12">
          <div class="watch">策略名称：{{ name }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">策略价格：{{ price }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch">计费方式：{{ mode }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">计费周期：{{ cycle }}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <div class="watch">是否自动续订：{{ isGoon === '1' ? '否' : '是' }}</div>
        </el-col>
        <el-col v-show="isGoon !== '1'" :span="12">
          <div class="watch">退订锁定期：{{ lockPeriod }}</div>
        </el-col>
      </el-row>

    </el-card>

    <el-card class="box-card1">
      <div slot="header">
        <span class="bold">计费渠道和计费码</span>
      </div>
      <el-row v-for="item in billingChannelList" :key="item.id">
        <el-col :span="12">
          <div class="watch">计费渠道:{{ item.billingChannelName }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">计费码:{{ item.billingCode }}</div>
        </el-col>
      </el-row>
    </el-card>

  </el-dialog>
</template>

<script>
import { getDetail, getSelectS } from '@/api/expenses.js'
export default {
  name: 'Watch',
  props: {
    watchDialog: {
      type: Boolean,
      default: false
    },
    watchId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showPointDialog: false, // 遮罩
      name: '', // 名字
      price: '', // 价格
      mode: '', // 计费方式,
      cycle: '', // 计费周期
      id: '', // id
      payStyles: [],
      lockPeriod: '',
      isGoon: 1, // 是否自动续订
      billingChannelList: []
    }
  },
  watch: {
    watchDialog(newVal) {
      this.showPointDialog = newVal
      this.loadSelect()
      this.loadDetail(this.watchId)
    }
  },
  methods: {
    // 获取下拉框计费方式
    loadSelect() {
      getSelectS({
        functionType: 'billingMode'
      }).then(res => {
        console.log(res)
        this.payStyles = res.data.list
      })
    },
    // 回调父组件
    check() {
      this.showPointDialog = false
      this.$emit('closeWatch')
    },
    // 请求详情
    loadDetail(id) {
      getDetail({ id: id }).then(res => {
        const data = res.data
        this.name = data.name // 策略名
        this.price = data.price // 价格
        this.payStyles.forEach(item => {
          if (item.typeId === data.mode) {
            this.mode = item.typeName
          }
        })
        this.cycle = data.cycle // 计费周期
        this.isGoon = data.isGoon // 是否自动续订
        this.id = data.id // 资费策略
        this.lockPeriod = data.lockPeriod // 退订锁定期
        this.billingChannelList = data.billingChannelList // 计费渠道
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  margin-top: -25px;
}
.box-card1{
  margin-top: 10px;
}
.box-card2{
  margin-top: 10px;
}
.watch{
  margin: 10px 0;
}
.bold{
  font-weight: bold;
}
.el-card__header{
  padding: 9px 20px !important;
}
</style>
